<!--
 * @Author: your name
 * @Date: 2021-04-13 16:42:43
 * @LastEditTime: 2021-04-21 13:16:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\quickEntry\projectManagement.vue
-->
<template>
  <a-row style="background:#fff;padding:20px">
    <div style="text-align:right;margin-bottom:20px">
      <a-input-search placeholder="请输入搜索关键词" v-model="searchText" style="width: 200px" @search="onSearch" />
    </div>
    <a-table class="employees-table" :columns="columns" :data-source="dataSource" rowKey="id" :pagination="{
      current: page,
      pageSize: pageSize,
      total: total,
      showLessItems: true,
      onChange: onPageChange,
      onShowSizeChange: onSizeChange,
    }">
      <template slot="info" slot-scope="text, record">
        <a-row type="flex" align="middle">
          <img :src="record.avatar" style="width:30px;height:30px;" alt="">
          <div style="margin-left:15px;">
            <h1>{{ record.title }}</h1>
            <div>{{ record.desc }}</div>
          </div>
        </a-row>
      </template>
      <div slot="status" slot-scope="text, record">
        <a-badge v-if="record.status == 'true'" color="green" text="正常" />
        <a-badge v-else color="red" text="异常" />
      </div>
      <a-row type="flex" slot="members" slot-scope="text, record">
        <span v-for="(item,index) in record.members" :key="index">{{item}}</span>
      </a-row>
      <div slot="operation" slot-scope="text, record">
        <a class="ant-dropdown-link" @click="onDetail(record)">详情</a>
      </div>
    </a-table>
  </a-row>
</template>

<script>
export default {
  name: 'projectManagement',
  data () {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          title: "基本信息",
          dataIndex: "info",
          scopedSlots: { customRender: "info" }
        },
        {
          title: "状态",
          dataIndex: "status",
          scopedSlots: { customRender: "status" }
        },
        {
          title: "所属部门",
          dataIndex: "section",
          scopedSlots: { customRender: "section" }
        },
        {
          title: "客户付款截止日期",
          dataIndex: "paymentDate",
          scopedSlots: { customRender: "paymentDate" }
        },
        {
          title: "项目成员",
          dataIndex: "members",
          scopedSlots: { customRender: "members" }
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      dataSource: [
        {
          id: 0,
          title: "11",
          desc: "1111",
          avatar: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
          status: "true",
          section: "销售部",
          paymentDate: "每月15号",
          members: ["1", "2", "3", "4"]
        }
      ],
      searchText: ""
    }
  },
  methods: {
    onDetail () {

    },
    onSearch () {

    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      console.log(page, pageSize)
      this.page = page
      this.pageSize = pageSize
    },
    onSizeChange (current, size) {
      console.log(current, size)
      this.page = 1
      this.pageSize = size
    },
  }
}
</script>

<style scoped lang="less">
.result-error {
  .error-icon {
    color: @red-6;
    margin-right: 8px;
  }
}
</style>
